<template>
  <div>
    <div @keyup.enter="getParamsData()">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="params.customer_name" placeholder="项目名称查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="params.corp_name"
            placeholder="负责人查询"
            :clearable="true"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <select-address
            v-model="params.address_code"
            clearable
            placeholder="地址查询"
            :auto-top="true"
            @change="getParamsData()"
          ></select-address>
        </el-form-item>
        <el-form-item>
          <el-button @click="getParamsData()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <c-table
      border
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      :data="tableData"
      :height="dialogHeight"
    ></c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getParamsData"
      ></el-pagination>
    </div>
    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="80%"
    >
      <el-tabs v-model="active">
        <el-tab-pane label="放款审批表" name="first">
          <loan-approve-self-view :query-id="queryId" :view-mode="true"></loan-approve-self-view>
        </el-tab-pane>
        <el-tab-pane label="合同附件" name="contract">
          <contract-guard-view :query-id="queryId"></contract-guard-view>
        </el-tab-pane>
        <el-tab-pane label="放款通知书" name="notice">
          <loan-notice :query-id="queryId"></loan-notice>
        </el-tab-pane>
        <el-tab-pane label="附件">
          <attach-view :queryId="queryId" :visible="reportVisible"></attach-view>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <loan-approve-self
      :visible.sync="editSelfVisible"
      @success="handleSuccess()"
      :queryId="editSelfQueryId"
    ></loan-approve-self>
  </div>
</template>

<script>
import { enumProcessStatus, enumGuatype } from '@/credit/plugins/enumTown'
import taskTableMixin from '@/credit/mixin/task/taskTable'
import SelectAddress from '@/components/select/SelectAddress'
import ContractGuardView from '@/credit/views/county/unionProvince/components/ContractGuardView'
import AttachView from '@/credit/components/AttachView'
import LoanApproveSelf from '@/credit/views/city/self/components/loanApprove/MainDialog'
import LoanApproveSelfView from '@/credit/views/city/self/components/loanApprove/Main'
import { getFollow } from '@/credit/mixin/taskTableCountyUnionProvince'
import LoanNotice from '@/credit/views/county/unionProvince/components/LoanNotice'
import { getWfKey } from '@/credit/views/county/unionProvince/components/loanApproveDeploy/index'
export default {
  components: {
    SelectAddress,
    ContractGuardView,
    AttachView,
    LoanApproveSelf,
    LoanApproveSelfView,
    LoanNotice,
  },
  mixins: [taskTableMixin],
  data() {
    return {
      order: {
        create_time: 'desc',
      },
      params: {
        index: 1,
        size: 10,
      },
      tableColumns: [
        {
          attrs: { label: '主体名称', prop: 'customer_name', minWidth: 135 },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '地址', prop: 'address', minWidth: 135 } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center', minWidth: 120 } },
        { attrs: { label: '放款金额(万元)', prop: 'reply_funds', align: 'center' } },
        { attrs: { label: '审批模式', prop: 'processLabel', width: 110, align: 'center' } },
        { attrs: { label: '待处理人员', prop: 'itemStatusLabel', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center', width: 100 },
          operations: [
            {
              content: '审批',
              icon: 'fa fa-gavel',
              event: this.handleEdit,
              ifRender: row => +row.task_status === 0,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
            },
          ],
        },
      ],
      tableData: [],
      loading: false,
      totalCount: 0,
      active: 'first',
      reportVisible: false,
      queryId: '',
      relatedData: {},
      editSelfVisible: false,
      editSelfQueryId: '',
    }
  },
  computed: {
    isUnion() {
      return this.$store.getters.user.scopeArr?.includes('dirGuaPro') ?? false
    },
  },
  created() {},
  methods: {
    async getParamsData(index = 1) {
      this.params.subKey = 'entrust_contract.customer_related_id'
      await this.getData(index)
      const record = await getFollow(
        this.tableData.filter(item => +item.gua_type !== 2),
        getWfKey(this.isUnion)
      )
      const recordSelf = await getFollow(
        this.tableData.filter(item => +item.gua_type === 2),
        'LOAD_APPROVAL_DIR'
      )
      const datas = record && record.length ? record.concat(recordSelf) : recordSelf

      this.tableData = this.tableData.map(it => {
        const data = datas.find(item => item.wf_related_id === it.customer_related_id) || {}
        it.itemStatusLabel = data.innerFollow || ''
        return it
      })
    },
    dataAdapter(item) {
      if (+item.gua_type === 4) {
        item.processLabel = enumProcessStatus[+item.process_status] || ''
      } else {
        item.processLabel = enumGuatype[item.gua_type]
      }
      return item
    },
    handleSuccess(res) {
      this.$store.dispatch('getMyTaskCount')
      this.$emit('success', res)
    },
    handleEdit(row = {}) {
      this.editSelfVisible = true
      this.editSelfQueryId = row.customer_related_id
    },
    handleView(row = {}) {
      this.active = 'first'
      this.queryId = row.customer_related_id
      this.relatedData = row
      this.reportVisible = true
    },
  },
}
</script>
<style lang="scss" scoped></style>
